<template>
  <div>
    <!--  #####################查询条件###################  -->
    <div align="center" style="margin-bottom: 20px; font-size: 30px"><b>{{this.record.name}}</b></div>
    <!--  #####################查询条件###################  -->

    <!--  #####################操作###################  -->
    <div class="table-operator">
      <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新建</a-button>
      <a-button v-action:query icon="rollback" @click="handleGoBack">返回</a-button>
    </div>
    <!--  #####################操作###################  -->

    <!--  #####################表格###################  -->
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
      bordered
    >

      <a-tag slot="status" slot-scope="text, record" :color="text == 2 ? '#108ee9' : '#f50'">
        {{text | statusFilter}}
      </a-tag>
      <a-tag slot="masterType" slot-scope="text, record" :color="text == 2 ? '#87d068' : '#2db7f5'">
        {{text | masterTypeFilter}}
      </a-tag>

      <span slot="fileUrl" slot-scope="text, record">
        <img :src="text" alt="" height="100px">
      </span>

      <span slot="action" slot-scope="text, record">
        <template>
          <a v-action:edit @click="handleEdit(record)">编辑</a>
          <a-divider v-action:edit type="vertical" />
          <a v-action:edit @click="updateStatus(record.id)"> {{record.status == 1 ? '上架':'下架'}}</a>
          <a-divider v-action:edit type="vertical" />
          <a v-action:delete @click="handleDel(record)">删除</a>
        </template>
      </span>
    </s-table>
    <!--  #####################表格###################  -->

    <!--  #####################打开的页面###################  -->
    <customer-grid-edit ref="createModal" @ok="handleOk"/>
    <!--  #####################打开的页面###################  -->
  </div>
</template>

<script>
  import moment from 'moment'
  import { STable } from '@/components'
  import customerGridEdit from './customerGridEdit'
  import { selectPage, updateStatus, deleteFile } from '@/api/system/uploadFile'

  export default {
    name: 'menuList',
    components: {
      STable,
      customerGridEdit,
    },
    props: {
      record: {
        type: [Object, String],
        default: ''
      }
    },
    data () {
      return {
        treeData: [],
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '菜单名称',
            dataIndex: 'name'
          },
          {
            title: '排序',
            dataIndex: 'sortNo'
          },
          {
            title: '图片',
            dataIndex: 'fileUrl',
            scopedSlots: { customRender: 'fileUrl' }
          },
          {
            title: '跳转路径',
            dataIndex: 'transUrl'
          },
          {
            title: '状态',
            dataIndex: 'status',
            sorter: true,
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '160px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          this.queryParam.masterType = 5
          this.queryParam.masterId = this.record.id
          return selectPage(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.result
            })
        }
      }
    },
    created() {

    },
    filters: {
      statusFilter(isDisabled) {
        const statusMap = {
          1: '未上架',
          2: '已上架'
        }
        return statusMap[isDisabled]
      },
      masterTypeFilter(isDisabled) {
        const statusMap = {
          1: '轮播图',
          2: '背景图'
        }
        return statusMap[isDisabled]
      }
    },
    methods: {
      handleAdd () {
        this.$refs.createModal.add(this.record.id)
      },
      handleEdit (record) {
        this.$refs.createModal.edit(record)
      },
      handleDel (record) {
        const _this = this
        this.$confirm({
          title: '警告',
          content: `真的要删除 ${record.name} 吗?`,
          okText: '删除',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            // 在这里调用删除接口
            deleteFile(record.filename).then(res => {
              if (res.code === 200) {
                _this.$message.success(res.message)
                _this.$refs.table.refresh()
              }
              if (res.code === 500) {
                _this.$message.error(res.message)
              }
            })
          }
        })
      },
      updateStatus(id){
        updateStatus(id).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功！')
            //刷新页面
            this.$refs.table.refresh()
          }
        })
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      handleGoBack () {
        this.$emit('onGoBack')
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      resetSearchForm () {
        this.queryParam = {
          date: moment(new Date())
        }
      }
    }
  }
</script>
